<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <v-data-table v-model="table.selected" select-all :headers="table.headers" :items="table.item" class="elevation-1" :total-items="table.totalItems" :pagination.sync="table.pagination" :rows-per-page-items="[10,20,30,40,50]" rows-per-page-text="10">
      <template v-slot:items="props">
        <td><v-checkbox v-model="props.selected" primary hide-details></v-checkbox></td>
        <td><v-icon small class="mr-2" @click="$emit('edit',props.item)">edit</v-icon><v-icon small class="mr-2" @click="$emit('up',props.item.id)">arrow_drop_up</v-icon><v-icon small class="mr-2" @click="$emit('down',props.item.id)">arrow_drop_down</v-icon></td>
        <td>{{ types[props.item.consultType] }}</td>
        <td>{{ props.item.question }}</td>
        <td>{{ props.item.answer }}</td>
      </template>
    </v-data-table>
  </div>
</template>

<script>
import { setTableHeight } from '@/utils/table'
import { mapGetters } from 'vuex'
import { getConsultAnswer, deleteConsultAnswer } from '../../api/consult'
export default {
  name: 'QuestionTable',
  props: {
    question: {},
    type: {}
  },
  data: () => ({
    types: ['身体形态', '身体机能', '身体素质', '拓展测试'],
    table: {
      selected: [],
      headers: [
        { text: '操作', sortable: false, value: 'action', align: 'center' },
        { text: '解答类型', sortable: false, value: 'consultType', align: 'center' },
        { text: '问题', sortable: false, value: 'question', align: 'center' },
        { text: '解答', sortable: false, value: 'answer', align: 'center' }
      ],
      totalItems: 0,
      pagination: {},
      item: []
    }
  }),
  methods: {
    update () {
      this.$nextTick(function () {
        getConsultAnswer(this.question, this.type, this.table.pagination.rowsPerPage, this.table.pagination.page).then((res) => {
          this.table.item = []
          if (res.data.data !== null) {
            this.table.item = res.data.data
          }
          this.table.totalItems = res.data.count
        })
      })
    },
    deleteQuestion () {
      if (this.table.selected.length === 0) {
        return
      }
      let id = []
      for (let i = 0; i < this.table.selected.length; i++) {
        id.push(this.table.selected[i].id)
      }
      deleteConsultAnswer(id).then((res) => {
        this.update()
      })
    }
  },
  mounted () {
    setTableHeight(document.documentElement.clientHeight)
  },
  computed: {
    ...mapGetters([
      'fullHeight',
      'fullWidth'
    ])
  },
  watch: {
    fullHeight: function (val) {
      setTableHeight(val)
    },
    fullWidth: function (val) {
      setTableHeight(this.fullHeight)
    },
    'table.pagination': {
      handler () {
        this.update()
      },
      deep: true
    }
  }
}
</script>

<style scoped>
@import "../../style/table.css";
</style>
